<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OpenLayers Example</title>
    <link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css">
<style type="text/css">
	#map {
		width : 100%;
		height : 100%;
		border : 1px solid black;
	}
</style>
<script src="http://openLayers.org/api/OpenLayers.js"></script>
<script type = "text/javascript">
	var map;
	var baseLayer;
	var editMode = false;
	var maxBounds;
	var measureControl;
	var LayerMap;
	function init() {
        // style the sketch fancy
        var sketchSymbolizers = {
            "Point": {
                pointRadius: 4,
                graphicName: "square",
                fillColor: "#0000FF",
                fillOpacity: 1,
                strokeWidth: 1,
                strokeOpacity: 1,
                strokeColor: "#0000FF"
            },
            "Line": {
                strokeWidth: 3,
                strokeOpacity: 1,
                strokeColor: "#0000FF",
                strokeDashstyle: "dash"
            },
            "Polygon": {
                strokeWidth: 2,
                strokeOpacity: 1,
                strokeColor: "#FF0000",
                fillColor: "Red",
                fillOpacity: 0.3
            }
        };
        var style = new OpenLayers.Style();
        style.addRules([
            new OpenLayers.Rule({symbolizer: sketchSymbolizers})
        ]);
        var styleMap = new OpenLayers.StyleMap({"default": style});
        
        measureControls = {
            line: new OpenLayers.Control.Measure(
                OpenLayers.Handler.Path, {
                    persist: true,
                    handlerOptions: {
                        layerOptions: {styleMap: styleMap}
                    }
                }
            ),
            polygon: new OpenLayers.Control.Measure(
                OpenLayers.Handler.Polygon, {
                    persist: true,
                    handlerOptions: {
                        layerOptions: {styleMap: styleMap}
                    }
                }
            )
        };
        
		maxBounds = new OpenLayers.Bounds(-180, -90, 180, 90);
		var options = {
				maxExtent : maxBounds,
				numZoomLevels : 20,
				maxResolution : "auto",
				controls : [],
				projection : "EPSG:4326",
				units : "degrees"
		};
		map = new OpenLayers.Map('map', options);
		baseLayer = new OpenLayers.Layer.WMS(
				'OpenLayers WMS',
				"http://vmap0.tiles.osgeo.org/wms/vmap0?", 
						{layers: 'basic'});
		baseLayer.setVisibility(true);
		LayerMap = new OpenLayers.Layer.Vector("Map Layer");
		
		map.addLayer(baseLayer);
		map.addLayer(LayerMap);
		map.addControl(new OpenLayers.Control.LayerSwitcher());
		map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon: true}));
		map.addControl(new OpenLayers.Control.MousePosition());		
		map.addControl(new OpenLayers.Control.ScaleLine());
		map.setCenter(maxBounds.getCenterLonLat(0, 0), 0);
		
		customcontrol = {
				navi : new OpenLayers.Control.Navigation(),
				line : new OpenLayers.Control.DrawFeature(LayerMap, OpenLayers.Handler.Path),
				polygon : new OpenLayers.Control.DrawFeature(LayerMap, OpenLayers.Handler.Polygon),
				point : new OpenLayers.Control.DrawFeature(LayerMap, OpenLayers.Handler.Point),
				regular : new OpenLayers.Control.DrawFeature(LayerMap, OpenLayers.Handler.RegularPolygon,
						{handlerOptions : {sides : 5}}
						),
				area : new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, options),
				distance : new OpenLayers.Control.Measure(OpenLayers.Handler.Path, options)
		};
		
		for(var key in customcontrol) {
			if(key == "distance" || key == "area") {
				measureControl = customcontrol[key];
				measureControl.events.on({
					"measure" : handleMeasurements,
					"measurepartial" : handleMeasurements
				});
				map.addControl(measureControl);
			} else {
				map.addControl(customcontrol[key]);
			}
		}
	}
	
	function handleMeasurements(event) {
		var geometry = event.geometry;
		var units = event.units;
		var order = event.order;
		var measure = event.measure;
		var element = document.getElementById('output');
		var out = "";
		if(order == 1) {
			out += "거리 : " + measure.toFixed(3) + " " + units;
			if(map.getProjection() == "EPSG:4326") {
				out += "<br /> Great Circle Distance : " + calcVincenty(geometry).toFixed(3) + " km *";
			}
		} else {
			out += "면적 : " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
		}
		element.innerHTML = out;
	}
	
	function calcVincenty(geometry) {
		var dist = 0;
		for(var i = 1; i < geometry.components.length; i++) {
			var first = geometry.components[i-1];
			var second = geometry.components[i];
			dist += OpenLayers.Util.distVincenty(
					{lon : first.x, lat : first.y},
					{lon : second.x, lat : second.y}
					);
		}
		return dist;
	}
	
	function toggleControl(element) {
		for(key in customcontrol) {
			var control = customcontrol[key];
			if(element.value == key) {
				control.activate();
			} else {
				control.deactivate();
			}
		}
	}
	
	function ZoomBox() {
		zoomBox.activate();
	}
	
	function Restart() {
		LayerMap.removeAllFeatures();
		map.zoomToMaxExtent();
		map.setCenter(new OpenLayers.LonLat(0, 0), 0);
		toggleControl(navi);
	}
</script>
</head>
<body onload = "init()">
<table border = "2" cellspacing="5" cellpadding = "0" style= "border-color : #CCCCFF" width = "100%" height = "80%">
<tr>
<td height= "20">
<div id = "control">
<input type = "button" name = "navi" value = "navi" onclick = "toggleControl(this)"/>
<input type = "button" name = "line" value = "line" onclick = "toggleControl(this)"/>
<input type = "button" name = "polygon" value = "polygon" onclick = "toggleControl(this)"/>
<input type = "button" name = "regular" value = "regular" onclick = "toggleControl(this)"/>
<input type = "button" name = "point" value = "point" onclick = "toggleControl(this)"/>
<input type = "button" name = "area" value = "area" onclick = "toggleControl(this)"/>
<input type = "button" name = "distance" value = "distance" onclick = "toggleControl(this)"/>
<input type = "button" name = "Restart" value = "Restart" onclick = "Restart()"/>
</div>
<b>Output : </b>
<div id = "output"></div>
</td>
</tr>
<tr>
<td height = "890" align = center>
<div id = "map"></div>
</td>
</tr>
</body>
</html>
















